<template>
	<div class="content">
		<u--input placeholder="请输入内容" v-model="form[item.prop]" :border="item.borderShow || 'none'" v-if="item.type == 'input'" class="m-l-r-5"></u--input>
		<u--textarea placeholder="请输入内容" v-model="form[item.prop]" :border="item.borderShow || 'none'" autoHeight v-else-if="item.type == 'textarea'" class="m-l-r-5"></u--textarea>
		<u-radio-group v-model="form[item.prop]" v-else-if="item.type == 'radio'">
			<u-radio :customStyle="{marginLeft: '10px'}" v-for="(it, ind) in item.checkList" :key="ind" :label="it.name" :name="it.name">
			</u-radio>
		</u-radio-group>
		<u-checkbox-group v-model="form[item.prop]" v-else-if="item.type == 'checkbox'">
			<u-checkbox :customStyle="{marginLeft: '10px'}" v-for="(it, ind) in item.checkList" :key="ind" :label="it.name" :name="it.name">
			</u-checkbox>
		</u-checkbox-group>
		<image :src="form[item.prop]" v-else-if="item.type == 'image'" class="image" :style="getCssStyle(item.contentCss)"></image>
		<u-rate v-model="form[item.prop]" :count="item.rateCount" v-else-if="item.type == 'rate'"></u-rate>
		<slot :name="item.prop" v-else-if="item.type == 'slot'"></slot>
		<div v-else class="text p-5" :style="getCssStyle(item.contentCss)">{{form[item.prop]}}</div>
	</div>
</template>

<script>
	import cssStyle from './js/cssStyle.js'
	export default {
		name: 'comForm',
		props: {
			item: {
				type: Object,
				default: () => {}
			},
			form: {
				type: Object,
				default: () => {}
			}
		},
		mixins: [cssStyle],
		data() {
			return {

			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-size: 14px;


		// box-sizing: border-box;
		display: flex;
		align-items: center;
	}

	.text {
		word-break: break-all;
	}

	.image {
		width: 80px;
		height: 80px;
	}

	.p-l-r-5 {
		padding: 0 5px;
	}

	.m-l-r-5 {
		margin: 0 5px;
	}

	.p-5 {
		padding: 5px;
	}
</style>